html{
    height: 100%; 
    width: 100%; 
    overflow: hidden;
}

body{
    width: 100%; 
    height: 100%;
    padding: 0;
    margin: 0; 
    background-color: #1e1e1e;
}

/*标签上的关闭按钮*/
#tabs a{
    margin-left: 40px;
    margin-right: 3px;
    cursor: default;
    font-size: 0;
    display: inline-block;
}
#tabs a:before, #tabs a:after{
    content: '';
    width: 10px;
    height: 1px;
    background: #fff;
    display: block;
}
#tabs a:before{
    transform: translateY(12px) rotate(45deg);
}
#tabs a:after{
    transform: translateY(-25px) rotate(-45deg);
}
#tabs a:hover:before, #tabs li a:hover:after{
    background: #f00;
}


/*标签栏*/
#tabs { 
    margin: 0;
    width: 100%;
    height: 38px;
    position: relative;
    color: #aaa;
    background: #555;    
    overflow: hidden;                           /*处理超出的内容*/
}

#tabs li{
    top: 3px;
    height:33px;
    line-height: 36px;                          /*行距，一行文字的高度*/
    padding: 0 .6em 0 .8em;
    margin-left: .2em;                          /*确定梯形交叠的范围大小*/
    display: inline-block;
    position: relative;
    text-align: left;
    cursor: default;
    z-index: 1;
}
#tabs li:before {
    content: '';
    background: #585858;
    text-decoration:none;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid rgba(0,0,0,.4);           /*描边*/
    border-bottom: none;                        /*不画底边*/
    border-radius: 5px 5px 0 0;                 /*圆角*/
    transform: perspective(8px) rotateX(5deg); /*梯形*/
    transform-origin: left right bottom;        /*梯形*/
    position: absolute;
    z-index: -3;
}

/*鼠标经过*/
#tabs li:hover {
    z-index: 2;
}
#tabs li:hover:before {
    background: #333;
    z-index: -2;
}

/*当前选中*/
#tabs li.current{
    color: #fff;
    z-index: 3;
}
#tabs li.current:before {
    background: #1e1e1e;
    z-index: -1;
}

/*编辑器*/
#editor{
    margin: 0;
    width: 100%; 
    height: 100%;
    color: #fff;
}